<template>
  <div>
    <div class="person">
      <el-row>
        <el-button type="success">添加</el-button>
      </el-row>
    </div>
    <div class="person-bottom">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="所属部门">
          <el-select v-model="formInline.region" placeholder="选择部门">
            <el-option label="财务部" value="财务部"></el-option>
            <el-option label="移动项目部" value="移动项目部"></el-option>
            <el-option label="PC业务部" value="PC业务部"></el-option>
            <el-option label="华军项目部" value="华军项目部"></el-option>
            <el-option label="pcsoft项目部" value="pcsoft项目部"></el-option>
            <el-option label="总经办" value="总经办"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table
            :data="tableData"
            border
            highlight-current-row
            style="width: 100%">
            <el-table-column
              prop="number"
              label=部门编号
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="部门名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="type"
              label="部门类型">
            </el-table-column>
            <el-table-column
              prop="business"
              label="拥有业务">
            </el-table-column>
            <el-table-column
              prop="people"
              label="部门人数">
            </el-table-column>
            <el-table-column
              prop="manage"
              label="管理">
              <template slot-scope="scope">
                 <el-button
                   size="mini"
                   @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                 <el-button
                   size="mini"
                   type="danger"
                   @click="handleDelete(scope.$index, scope.row)">删除</el-button>
               </template>
          </el-table-column>
       </el-table>
      <div>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="1000">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
  <script>
    export default {
      name:'personnel',
      data() {
      return {
        formInline: {
          region: ''
        },
        tableData: [{
          number: '1',
          name: 'pc业务部',
          type: '业务部',
          business: '华军软件园',
          people:'20',
          manage:'删除'
        },
        {
          number: '2',
          name: 'pc业务部',
          type: '业务部',
          business: '华军软件园',
          people:'20',
          manage:'删除'
        },
         {
          number: '3',
          name: 'pc业务部',
          type: '业务部',
          business: '华军软件园',
          people:'20',
          manage:'删除'
        },
        {
          number: '4',
          name: 'pc业务部',
          type: '业务部',
          business: '华军软件园',
          people:'20',
          manage:'删除'
        }]
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
    }
  </script>
  <style>
    .person{
     padding-top:20px;
     text-align:left;
     padding-bottom:20px;
     margin-bottom:20px;
     border-bottom:1px solid #ddd;
    }
    .person .el-button{
      width:100px;
      padding:10px;
      }
      .person-bottom{
       text-align:left;
      }
      .el-table th>.cell{
        text-align:center;
      }
      .el-pagination{
        background:#fff;
        padding: 20px 5px;
        text-align:center;
      }
    .el-form{
     margin-bottom:20px;
    }
    .el-table__body-wrapper{
      text-align:center;
    }
  </style>
